<template>
  <el-tabs type="border-card">
    <el-tab-pane label="创建odl设备连接">
      <div class="create_devm">
        <el-form :model="node" :rules="rules" ref="node" label-width="100px" class="demo-ruleForm">
          <el-form-item label="设备型号" prop="node">
            <el-select v-model="node.type" placeholder="请选择设备" class="select_devm">
              <el-option label="OTN-A" value="A"></el-option>
              <el-option label="OTN-U" value="U"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点名称" prop="node">
            <el-input v-model="node.name"></el-input>
          </el-form-item>

          <el-form-item label="用户信息" required>
            <el-row>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-input placeholder="请输入账号" v-model="node.username" prefix-icon="el-icon-s-custom"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" style="margin-left: 20px">
                <el-form-item prop="date1">
                  <el-input placeholder="请输入密码" :type="type" v-model="node.password"
                            autocomplete="on" prefix-icon="el-icon-lock">
                    <i
                        slot="suffix"
                        class="icon-style"
                        :class="elIcon"
                        autocomplete="auto"
                        @click="flag = !flag"
                    />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="IP">
            <el-input placeholder="请输入设备ip地址" v-model="node.host"></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input placeholder="请输入端口号" v-model="node.port"></el-input>

          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仅TCP">
                <el-switch
                    v-model="node.tcpOnly"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重新连接">
                <el-switch
                    v-model="node.reconnect"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item>
            <el-row>
              <el-col :span="18">
                <el-button type="primary" @click="submitForm('node')">立即提交</el-button>
                <el-button @click="resetForm('node')">重置</el-button>
              </el-col>
              <el-col :span="6">
                <el-button type="mini" @click="getConfigNode">刷新</el-button>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="创建netconf直连">
      <div class="create_devm">
        <el-form :model="netconf" :rules="rules" ref="netconf" label-width="100px" class="demo-ruleForm">
          <el-form-item label="节点名称" prop="node">
            <el-input v-model="netconf.name"></el-input>
          </el-form-item>

          <el-form-item label="用户信息" required>
            <el-row>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-input placeholder="请输入账号" v-model="netconf.username" prefix-icon="el-icon-s-custom"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" style="margin-left: 20px">
                <el-form-item prop="date1">
                  <el-input placeholder="请输入密码" :type="type" v-model="netconf.password"
                            autocomplete="on" prefix-icon="el-icon-lock">
                    <i
                        slot="suffix"
                        class="icon-style"
                        :class="elIcon"
                        autocomplete="auto"
                        @click="flag = !flag"
                    />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="IP">
            <el-input placeholder="请输入设备ip地址" v-model="netconf.host"></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input placeholder="请输入端口号" v-model="netconf.port"></el-input>

          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="18">
                <el-button type="primary" @click="createNetconfNode('netconf')">立即提交</el-button>
                <el-button @click="resetForm('netconf')">重置</el-button>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import axios from "axios";

export default {
  name: 'MeNodeParams',
  components: {
    // eslint-disable-next-line vue/no-unused-components
  },
  props: ['name'],
  data() {
    return {
      flag: true,
      node: {
        type: "请选择设备类型",
        name: 'hclink',
        username: 'root',
        password: '123456',
        host: '192.168.1.101',
        port: 830,
        tcpOnly: false,
        reconnect: true,
      },
      netconf: {
        name: 'hclink',
        username: 'root',
        password: 'dfqxyfy',
        host: '192.168.135.117',
        port: 830,
      },

      /*
      * `elmt_alias` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default ''  COMMENT '网元别名',
        `power_mode` tinyint(1) NOT NULL default 0  NOT NULL COMMENT '网元/子架供电方式（0:220V AC/ 1:48V DC）',
        `work_mode` tinyint(1) NOT NULL default 0  NOT NULL COMMENT '网元/子架风扇工作模式',
        `location` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default '' COMMENT '市县、机房',
        `rack` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default '' COMMENT '机架',
        `holder` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default '' COMMENT '子架',
        `longitude` DECIMAL(6,2) COMMENT '经度',
        `latitude` DECIMAL(6,2) COMMENT '纬度',
        `parent_elmt_no` int(6) NOT NULL default 0 COMMENT '父网元号',
        `create_datetime` datetime DEFAULT NULL COMMENT '创建时间',
        `create_user` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default '' COMMENT '网元创建用户',
        `left_topx` int(5) default 0 COMMENT '网元在视图左上角X坐标',
        `left_topy` int(5) default 0 COMMENT '网元在视图左上角Y坐标',
        `elmt_remarks` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL default '' COMMENT '网元备注',
      * */
      me_infos: {
        elmt_alias: '',
        power_mode: '',
        work_mode: '',
        location: '',
        rack: '',
        holder: '',
        longitude: '',
        latitude: '',
        parent_elmt_no: '',
        create_datetime: '',
        create_user: '',
        left_topx: '',
        left_topy: '',
        elmt_remarks: '',
      },

      rules: {
        name: [
          {required: true, message: '请输入网元名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "el-icon-view" : "el-icon-minus";
    }
  },
  methods: {
    submitForm(formName) {

      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.$nextTick(function () {
            this.$bus.$emit('new:ne', this.node)
          })

          const {data: res} = await this.$http.post("/create/node", this.node);
          if (res === 200) {
            this.$message.success("已有设备，更新数据成功");
          } else if (res === 201) {
            this.$message.success("新设备创建成功");
            //把新创建的设备节点发送出去
            this.$bus.$emit('new-node', this.node.name);
          } else {
            this.$message.error("创建失败");
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    createNetconfNode(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.$nextTick(function () {
            this.$bus.$emit('new:ne', this.netconf)
          })

          const {data: res} = await this.$http.post("/netconf/establish", this.netconf);

          console.log(res);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    showPassword() {
      var isPassword = !this.data.isPassword;
      this.setData({
        isPassword: isPassword
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getConfigNode() {
      console.log("收到的名字为", this.name)
      if (this.name !== '') {
        axios.get("/config/node/" + this.name).then(
            response => {
              console.log("请求成功", response.data);
              this.node = response.data;
            },
            error => {
              console.log("失败！", error.message)
            }
        )
      }
    },

  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      this.name = data;
    });


    this.getConfigNode();
  }
}
</script>

<style scoped>
.create_devm {
  /*background: #a3a6aa;*/
  width: auto;
  height: auto;
}

element.style {
  width: 100%;
}

.select_devm {
  width: 100%;
}
</style>